<template>
  <a-modal
    width="50%"
    v-model="isModal"
    :title="title"
    :footer="null"
    :maskClosable="false"
    forceRender
    destroyOnClose
    @cancel="cancel"
  >
    <a-form-model v-if="isModal">
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="是否必填" required>
        <RadioYesNo :value="currentObj.isRequired" field="isRequired" f_field="currentObj" @f_setYesNo="s_setYesNo" />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="默认值" required>
        <a-input v-model="currentObj.default" style="width: 150px" placeholder="请输入最默认值" />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="是否隐藏" required>
        <RadioYesNo :value="currentObj.hidden" field="hidden" f_field="currentObj" @f_setYesNo="s_setYesNo" />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="是否禁用" required>
        <RadioYesNo :value="currentObj.disable" field="disable" f_field="currentObj" @f_setYesNo="s_setYesNo" />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="校验规则">
        <RulesAdd ref="rulesRef" :valuelist="currentObj.rules" />
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="是否小标题" required>
        <RadioYesNo :value="currentObj.isLabel" field="isLabel" f_field="currentObj" @f_setYesNo="s_setYesNo" />
        <!-- 如果是小标题输入小标题 -->
        <template v-if="currentObj.isLabel">
          <br />小标题：<a-input
            style="width: 350px"
            allow-clear
            v-model="currentObj.option.label"
            :maxLength="10"
            placeholder="请输入小标题"
        /></template>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="是否响应式" required>
        <RadioYesNo
          :value="currentObj.isExpression"
          field="isExpression"
          f_field="currentObj"
          @f_setYesNo="s_setYesNo"
        />
        <!-- 如果是小标题输入小标题 -->
        <template v-if="currentObj.isExpression"
          ><br />表达式：<a-input
            style="width: 350px"
            allow-clear
            v-model="currentObj.option.expression"
            placeholder="请输入表达式 this.selectData.字段名==枚举值"
        /></template>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="控件类型" required>
        <RadioYesNo
          :value="currentObj.type"
          field="type"
          f_field="currentObj"
          @f_setYesNo="s_setYesNo"
          :dataList="typeList"
        />
        <br />
        <!-- 输入框类型 -->
        <template v-if="['textarea', 'input'].includes(currentObj.type)">
          最大长度：<a-input-number
            v-model="currentObj.option.maxLength"
            style="width: 150px"
            placeholder="请输入最大长度"
          />
        </template>
        <!-- 数字输入框类 -->
        <template v-else-if="currentObj.type == 'number'">
          最小值：<a-input-number
            style="width: 150px"
            v-model="currentObj.option.minValue"
            placeholder="请输入最小值"
          /><br />
          最大值：<a-input-number
            style="width: 150px"
            v-model="currentObj.option.maxValue"
            placeholder="请输入最大值"
          /><br />
          精度：<a-input-number
            style="width: 150px"
            v-model="currentObj.option.precision"
            :placeholder="`请输入精度`"
          />
        </template>
        <!-- 文件类型 -->
        <template v-else-if="currentObj.type == 'file'">
          上传数量：<a-input-number
            style="width: 150px"
            v-model="currentObj.option.maxFile"
            placeholder="请输入最大上传数量"
          />
        </template>
        <!-- 枚举下拉类型 -->
        <template v-else-if="['select', 'tree', 'checkbox', 'radio'].includes(currentObj.type)">
          <!-- 枚举值单多选 -->
          控件类型：<RadioYesNo
            :value="currentObj.type"
            :dataList="[
              { key: 'select', name: '下拉框' },
              { key: 'checkbox', name: '复选框' },
              { key: 'radio', name: '单选框' }
            ]"
            field="type"
            f_field="currentObj"
            @f_setYesNo="s_setYesNo"
          />
          <br />
          <!-- 枚举下拉组件 -->
          枚举值：<SearchEnum @f_setEnum="s_setEnum" :value="currentObj.option.enum" />
          <br />
          <!-- 枚举值单多选 -->
          是否多选：<RadioYesNo
            :value="currentObj.option.ismultiple"
            field="ismultiple"
            f_field="option"
            @f_setYesNo="s_setYesNo"
          />
          <br />
          <!-- 从表来源： -->
          从表来源：<RadioYesNo
            :value="currentObj.option.issub"
            field="issub"
            f_field="option"
            @f_setYesNo="s_setYesNo"
          />
        </template>
        <!-- 级联类型 -->
        <template v-else-if="currentObj.type == 'cascader'">
          <RadioYesNo
            :value="currentObj.option.range"
            field="range"
            f_field="option"
            @f_setYesNo="s_setYesNo"
            :dataList="rangeList"
          />
        </template>
        <!-- 日期类型 -->
        <template v-else-if="currentObj.type == 'date'">
          格式化：<a-input
            v-model="currentObj.option.format"
            style="width: 250px"
            placeholder="请输入格式化 YYYY-MM-DD"
          />
        </template>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="过滤条件">
        <FilterAdd ref="filterRef" :fieldList="currentObj.entfieldlist" :valuelist="currentObj.filters" />
      </a-form-model-item>
    </a-form-model>

    <!-- 按钮 -->
    <div class="btnBox">
      <a-button
        @click="
          () => {
            isModal = false
          }
        "
        :style="{ marginRight: '8px' }"
        icon="rollback"
      >
        返回
      </a-button>
      <a-button @click="configSave()" type="primary" :style="{ marginRight: '8px' }" icon="save"> 保存 </a-button>
    </div>
  </a-modal>
</template>
<script>
import { currentObj } from '@/utils/formassembly/generaltree.js'
export default {
  data() {
    return {
      index: null, // 配置项的下标
      currentObj: currentObj,
      title: '属性配置',
      rangeList: [
        { key: 'ad', name: '全国(不含街道)' },
        { key: 'ad4', name: '全国(含街道)' },
        { key: 'ad4jx', name: '江西' },
      ],
      typeList: [
        { key: 'input', name: '文本' },
        { key: 'number', name: '数字' },
        { key: 'select', name: '枚举' },
        { key: 'file', name: '文件' },
        { key: 'date', name: '日期' },
        { key: 'textarea', name: '文本域' },
        { key: 'cascader', name: '地址级联' },
        { key: 'tree', name: '下拉树' },
      ], // 控件类型单选配置
      // attributeObj: {
      //   isLabel: false, // 是否是小标题
      //   isRequired: true, // 是否必填
      //   default: '', // 默认值
      //   isExpression: false, // 是否响应式
      //   type: 'input', // 控件类型
      //   hidden: false, // 是否隐藏
      //   disable: false, // 是否禁用
      // }, // 属性配置对象
      // currentObj: {
      //   enum: undefined, // 枚举值: 枚举组件才有
      //   type: undefined, // 控件类型
      //   ismultiple: false, // 是否多选: 枚举组件才有
      //   label: '', // 小标题属性
      //   expression: '', // 弹框响应式布局配置
      //   rules: [], // 校验的正则表达式
      //   filters: [], // 过滤条件
      //   maxLength: undefined, // 最大长度
      //   precision: undefined, // 精度
      //   minValue: undefined, // 最小值
      //   maxValue: undefined, // 最大值
      //   maxFile: undefined, // 最大文件上传数量
      //   range: undefined, // 级联的范围
      //   format: undefined, // 时间格式化
      // }, // 属性配置对象值
      labelCol: { span: 4 }, // label宽
      wrapperCol: { span: 18 }, // 组件宽
      isModal: false, // 模态框状态
    }
  },
  created() {},
  methods: {
    s_setEnum(value) {
      this.$set(this.currentObj.option, 'enum', value)
      // this.$set(this.currentObj.option, 'enum', value)
    },
    // 关闭重置属性
    cancel() {
      this.isModal = false
    },
    // 保存
    configSave() {
      // 1. 必要的校验
      // console.log('this.currentObj', this.currentObj)
      if (this.currentObj.isLabel && !this.currentObj.option.label) {
        this.$message.warning('请输入小标题')
        return
      } else if (this.currentObj.isExpression && !this.currentObj.option.expression) {
        this.$message.warning('请输入响应式表达式')
        return
      }
      // 2. 取校验组件的值
      let r_check = this.$refs.rulesRef.f_checkRules()
      if (r_check?.status) {
        this.currentObj.rules = r_check.value || []
      } else {
        return
      }
      // 3. 去过滤组件配置
      let f_check = this.$refs.filterRef.f_checkfilter()
      if (f_check?.status) {
        this.currentObj.filters = f_check.value || []
      } else {
        return
      }
      // 4. 校验对应类型的属性
      if (['textarea', 'input'].includes(this.currentObj.type)) {
        if (!this.currentObj.option.maxLength) {
          this.$message.warning('请输入文本最大长度')
          return
        }
      } else if (this.currentObj.type == 'number') {
        if (this.currentObj.option.precision == undefined) {
          this.$message.warning('请输入数字精度')
          return
        }
        if (this.currentObj.option.minValue == undefined) {
          this.$message.warning('请输入数字最大值')
          return
        }
        if (this.currentObj.option.maxValue == undefined) {
          this.$message.warning('请输入数字最小值')
          return
        }
      } else if (['select', 'tree'].includes(this.currentObj.type)) {
        if (!this.currentObj.option.enum) {
          this.$message.warning('请输入枚举值')
          return
        }
      } else if (this.currentObj.type == 'file') {
        if (!this.currentObj.option.maxFile) {
          this.$message.warning('请输入文件上传最大数量')
          return
        }
      }
      // 4. 返回给父组件保存
      console.log('this.currentObj', this.currentObj)

      this.$emit('f_setFieldValue', this.currentObj, this.index)
      this.cancel()
    },
    // 单选组件值
    s_setYesNo(value, field, f_field) {
      console.log('s_setYesNo', value, field, f_field)
      if (f_field == 'option') {
        this.$set(this.currentObj.option, field, value)
      } else {
        this.$set(this.currentObj, field, value)
      }
    },
    // 初始化方法
    f_init(title, body, index) {
      this.index = index
      this.title = title
      this.currentObj = JSON.parse(JSON.stringify(body))
      this.isModal = true
    },
  },
  components: {
    RadioYesNo: () => import('@/views/businessAssembly/public/spareparts/radioYesNo'),
    RulesAdd: () => import('@/views/businessAssembly/public/spareparts/rulesAdd.vue'),
    SearchEnum: () => import('@/views/businessAssembly/public/spareparts/searchEnum.vue'),
    FilterAdd: () => import('@/views/businessAssembly/public/spareparts/filterAdd.vue'),
  },
}
</script>

<style lang="less" scoped>
.btnBox {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  padding-bottom: 50px;
}
</style>
